<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="故障名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="宿舍楼" prop="floor">
            <el-select v-model="ruleForm.floor" placeholder="请选择宿舍区域">
                <el-option label="一号楼" value="1"></el-option>
                <el-option label="二号楼" value="2"></el-option>
                <el-option label="三号楼" value="3"></el-option>
                <el-option label="四号楼" value="4"></el-option>
                <el-option label="五号楼" value="5"></el-option>
                <el-option label="六号楼" value="6"></el-option>
                 <el-option label="七号楼" value="7"></el-option>
                <el-option label="八号楼" value="8"></el-option>
                <el-option label="九号楼" value="9"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="宿舍号" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="期望上门" required>
            <el-col :span="11">
                <el-form-item prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>

        <el-form-item label="故障简介" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即报修</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>

<!--<el-form ref="form" :model="form" label-width="80px" :rules="rules" >
    <el-form-item label="故障名称">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="宿舍楼">
        <el-select v-model="form.floor" placeholder="请选择宿舍楼">
            <el-option label="一号楼" value="1"></el-option>
            <el-option label="二号楼" value="2"></el-option>
            <el-option label="三号楼" value="3"></el-option>
            <el-option label="四号楼" value="4"></el-option>
            <el-option label="五号楼" value="5"></el-option>
            <el-option label="六号楼" value="6"></el-option>
            <el-option label="七号楼" value="7"></el-option>
            <el-option label="八号楼" value="8"></el-option>
            <el-option label="九号楼" value="9"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="宿舍号">
        <el-input v-model="form.address" placeholder="门牌号"></el-input>
    </el-form-item>
    <el-form-item label="联系电话">
        <el-input v-model="form.phone" placeholder="联系电话"></el-input>
    </el-form-item>



    <el-form-item label="故障简介">
        <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="resetForm">重置</el-button>
    </el-form-item>
</el-form>-->
</template>


<script>
    // eslint-disable-next-line no-unused-vars
    import { request } from "@/axios/request";
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    address:'',
                    floor: '',
                    phone: '',
                    date:"",
                    desc:'',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入故障名称', trigger: 'blur' },
                        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                    ],
                    floor: [
                        { required: true, message: '请选择宿舍区域', trigger: 'change' }
                    ],
                    date: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号！', trigger: 'blur' },
                        { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入宿舍号', trigger: 'change' }
                    ],

                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request({
                            url: "/malfunction",
                            data: this.ruleForm,
                            method: "post",
                        }).then((res) => {

                                this.$message({
                                    message:res.data.msg,
                                    type:'success'
                                })
                            this.resetForm(formName);
                        }).catch(error=>{
                            this.$message({
                                message:error.response.data.msg,
                                type: 'error'
                            })
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>
<!--
<script>
    // eslint-disable-next-line no-unused-vars
    import { request } from "@/axios/request";
    export default {
        data() {
            return {
                form: {
                    name: '',
                    address:'',
                    floor: '',
                    phone: '',
                },
                rules: {
                    name: [
                        { required: true, message: "请输入报修名称", trigger: "blur" },
                        { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
                    ],
                    phone: [
                        { required: true, message: "请输入唯一状态码", trigger: "blur" },
                        { min: 11, max: 11, message: "长度在 11 到 11 个字符", trigger: "blur" },
                    ],
                    address: [{ required: true, message: "请输入地址", trigger: "blur" }],
                },
            }
        },
        methods: {
            onSubmit() {
                 this.$refs.form.validate((valid) => {
                    if (valid) {
                        console.log(this.form);
                        request({
                            url: "/malfunction",
                            data: this.form,
                            method: "post",
                        }).then((res) => {
                            this.$message({
                                message:res.data.msg,
                                type:'success'
                            })
                        });
                        this.resetForm()
                    } else {
                        alert("error submit!!");
                        return false;
                    }
                });



            },


            resetForm() {
              this.form = {};
            },
        }
    }
</script>-->
